<template>
	<!-- 商城首页-全部潮鞋 -->
	<view class="">
		<view class="list-scope" :class="{scroll: isScroll}" v-if="wrapMode === 'wrap'">
			<template v-if="grid == 'grid2'">
				<ProductItem @tap="clickItem" :class="grid" :grid="grid" v-for="(item, index) in list" :info="item">
				</ProductItem>
			</template>
			<template v-else-if="grid == 'grid3'">
				<ProductItem @tap="clickItem" theme="theme-1" :grid="grid" :isShowTags="false" :class="grid"
					v-for="(item, index) in list" :info="item"></ProductItem>
			</template>
		</view>
		<view v-if="!list.length" style="height: 70vh;overflow: hidden;">
			<NoData></NoData>
		</view>
		<scroll-view scroll-x class="scroll-list" v-else-if="wrapMode === 'scroll'">
			<template v-if="grid == 'grid2'">
				<ProductItem @tap="clickItem" :class="grid" :grid="grid" v-for="(item, index) in list" :info="item">
				</ProductItem>
			</template>
			<template v-else-if="grid == 'grid3'">
				<ProductItem @tap="clickItem" theme="theme-1" :grid="grid" :isShowTags="false" :class="grid"
					v-for="(item, index) in list" :info="item"></ProductItem>
			</template>
		</scroll-view>
	</view>

</template>

<script>
	export default {
		props: {
			ids: {
				type: Array
			},
			module: {
				type: Object,
				default () {
					return {}
				}
			},
			refreshCounter: Number,
			getNextPageCounter: Number
		},
		data() {
			return {
				page: 1,
				list: [],
			}
		},
		mounted() {
			this.initData()
		},
		computed: {
			isScroll() {
				return this.module.theme == 'scroll'
			},
			grid() {
				return this.module.grid || 'grid3'
			},
			wrapMode() {
				return this.module.wrap_mode || 'wrap'
			}
		},
		watch: {
			ids() {
				this.initData()
			},
			refreshCounter() {
				this.initData()
			},
			getNextPageCounter(val) {
				this.getNextPage()
				// if (this.module.list_content === 'all') {
				// 	this.getNextPage()
				// }
			}
		},
		methods: {
			initData() {
				if (this.module.list_content === 'all') {
					this.page = 1

					this.$http('/zb-product/list', 'GET', {
						page: this.page,
						per_page: 80,
						sort_by: this.module.sort
					}).then(res => {
						this.list = res.data.list
					})
				} else if (this.module.list_content === 'by_category') {
					this.page = 1

					this.$http('/zb-product/list', 'GET', {
						page: this.page,
						per_page: 12,
						categoryIds: this.module.categoryIds,
						sort_by: this.module.sort
					}).then(res => {
						this.list = res.data.list
					})
				} else {
					if (this.ids && this.ids.length > 0) {
						this.$http('/zb-product/list', 'GET', {
							per_page: 80,
							ids: this.ids,
							sort_by: this.module.sort
						}).then(res => {
							this.list = res.data.list
						})
					}
				}
			},
			clickItem() {
				this.$playAudio('click')
			},
			getNextPage() {
				this.page++
				// console.log('get next page')

				if (this.module.list_content === 'all') {
					this.$http('/zb-product/list', 'GET', {
						page: this.page,
						per_page: 12,
						sort_by: this.module.sort
					}).then(res => {
						this.list = this.list.concat(res.data.list)
					})
				} else if (this.module.list_content === 'by_category') {
					this.$http('/zb-product/list', 'GET', {
						page: this.page,
						per_page: 12,
						categoryIds: this.module.categoryIds,
						sort_by: this.module.sort
					}).then(res => {
						this.list = this.list.concat(res.data.list)
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.list-scope {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// background-image: url('https://zsw-bimface-res2.izsw.net/img/bim-community/%E8%92%99%E7%89%88%E5%88%86%E7%BB%84.png');
		// background-repeat: no-repeat;
		// background-size: cover;

		&.scroll {
			flex-wrap: nowrap;
		}

		.grid2 {
			width: 44%;
			height:420rpx;
			display: inline-block;
			background-image: url('https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/44891712821344999.png');
			background-repeat: no-repeat;
			background-size: contain;
			border-radius: 20rpx;
			// background-color: #151515;
		}

		.grid3 {
			width: 32%;
			display: inline-block;
		}
	}

	.scroll-list {
		white-space: nowrap;

		&.scroll {
			flex-wrap: nowrap;
		}

		.grid2 {
			margin-right: 20rpx;
			display: inline-block;
			width: 52%;
		}

		.grid3 {
			width: 34%;
			margin-right: 20rpx;
			display: inline-block;
		}
	}
</style>